 <template>
   <div class="capitalflow">
     <Card :shadow="shadow">
     <p slot="title">资金流水列表</p>
      <div class="content-con">
        <Form ref="form-validate" inline :model="formItem" style="text-align: right;">
              <FormItem >
                <Date-picker v-model="formItem.starttime" clearable  type="datetime" placeholder="开始时间"></Date-picker>
              </FormItem>
              <FormItem  >
                <Date-picker  v-model="formItem.endtime" clearable type="datetime" placeholder="结束时间"></Date-picker>
              </FormItem>
              <FormItem >
                <i-input v-model="formItem.bill_no" clearable  placeholder="业务单号"></i-input>
              </FormItem>
              <FormItem >

                <i-select v-model="formItem.pm"  clearable style="color: #000;" placeholder="资金变动方向">
                  <i-option v-for="item in moneyList" :value="item.value">{{ item.label }}</i-option>
                </i-select>
              </FormItem>
              <FormItem >
                <i-select v-model="formItem.category" size="large"  style="color: #000;" placeholder="业务类型">
                  <i-option v-for="item in typeList" :value="item.value">{{ item.label }}</i-option>
                </i-select>
              </FormItem>
            <FormItem >
              <i-button  class="com-btm" @click="searchBtn">搜索</i-button>
            </FormItem>
        </Form>
        <div class="bank-form">
          <div class="form-item">
            <i-table :columns="capitalColumns" :data="listData">
             <template slot-scope="{ row }" slot="submoney">
               <span :class="row.balance | balancemoney(row.number) > 0 ? 'green': 'red'">
                 {{row.balance | balancemoney(row.number,row.pm)}}
               </span>
             </template>
              <template slot-scope="{ row }" slot="number">
                <Tag :color="row.pm=='增加'?'green':'red'">{{row.pm | changesStr}}{{row.number}}</Tag>

              </template>
            </i-table> <!-- table组件 -->
          </div>
          <div class="page" style="overflow: hidden;">
            <Page ref="pageId"
            class="pagename"
             :total="dataCount"
             :page-size="pageSize"
             style="float: left;"
             size="small"
             @on-change="changepage"
             @on-page-size-change="nowPageSize"
             show-total show-sizer show-elevator></Page> <!-- page组件 -->
            <!-- <Button size="small" style="float: left;margin-left: 10px;margin-top: 2px;background-color: #009688;" type="primary" @click="goElevatorPage">确认</Button> -->
          </div>
        </div>
      </div>
   </Card>
   </div>

 </template>
<script>
import expandRow from '@/components/table/table-expand'
import { getmerbilllist } from '@/api/paid'
export default {
  // name: 'capitalflow',
  props: {
    shadow: {
      type: Boolean,
      default: false
    }
  },
  components: { expandRow },
  data () {
    return {
      value: '',
	   pageId: 'targetpage',
      pagedData: [],
      // 初始化信息总条数
      dataCount: 0,
      // 每页显示多少条
      pageSize: 10,
      pageCurrent: 1, // 当前页
      capitalColumns: [
        {
          type: 'expand',
          width: 50,
          render: (h, params) => {
            return h(expandRow, {
              props: {
                row: params.row
              }
            })
          }
        },
        {
          title: '流水订单号',
          key: 'bill_no',
          width: 200
        },

        {
          title: '变更前金额(元)',
          slot: 'submoney',
          width: 120
        },
        {
          title: '变更金额(元)',
          width: 120,
          slot: 'number'
        },
        {
          title: '变更后金额(元)',
          key: 'balance',
          width: 160
        },
        {
          title: '业务类型',
          key: 'billType',
          width: 160

        },

        // {
        //   title: '手续费(元)',
        //   key: 'poundage',
        //   width: 140
        // },
        {
          title: '创建时间',
          key: 'add_time'
        }

      ],
      capitalData: [],
      listData: [],
      formItem: {
        starttime: '',
        endtime: '',
        bill_no: '',
        pm: '',
        category: ''
      },
      timeList: [

        {
          value: 'today',
          label: '当日'
        },
        {
          value: 'yesterday',
          label: '昨日'
        },
        {
          value: 'week',
          label: '本周'
        },
        {
          value: 'month',
          label: '本月'
        }
      ],
      model1: '',
      capitalList: [],
      moneyList: [

        {
          value: '1',
          label: '加款'
        },
        {
          value: '0',
          label: '减款'
        }
      ],
      model2: '',
      typeList: [

        {
          value: 'changes_money',
          label: '调账'
        },
        // {
        //   value: 'shhen',
        //   label: '充值'
        // },
        // {
        //   value: 'sen',
        //   label: '差错处理'
        // },
        {
          value: 'paid_money',
          label: '代付/处理'
        }
        // {
        //   value: 'sh',
        //   label: '回退'
        // }
      ],
      model3: ''
    }
  },
  methods: {
    // 获取资金流水列表
    getcapitalData () {
      this.formItem.uid = this.$store.state.user.userInfo.uid
      this.formItem.pageSize = this.pageSize
      this.formItem.pageCurrent = this.pageCurrent
      getmerbilllist(this.formItem).then(res => {
        this.listData = res.data.data
        this.dataCount = res.data.count
      })
        .catch(err => {
          this.$Message.error(err.msg)
        })
    },
    // 按条件搜索资金列表
    searchBtn () {
      this.getcapitalData()
    },

    // 点击切换页面
    changepage (index) {
      this.pageCurrent = index
      this.getcapitalData()
    },
    // 每页显示的数据条数
    nowPageSize (index) {
      // 实时获取当前需要显示的条数
      this.pageSize = index
      this.getcapitalData()
    }
  },
  created () {
    this.getcapitalData()
  }
}
</script>
 <style lang="less">
  .capitalflow .ivu-card-head {
     position: relative;
   }

   .capitalflow .ivu-card-head::after {
     content: '';
     position: absolute;
     left: 13px;
     bottom: 0;
     width: 100px;
     border-bottom: 2px solid #5FB878;
   }
   .capitalflow .ivu-table-cell {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap!important;
     }
     .red{
       color: red;
     }
     .green{
       color: green;
     }
 </style>
